<template>
  <!-- 盘点表 -->
  <div class="pan">
    <span>搜索:</span>
    <el-input v-model="value" placeholder="请输入库存或者分类" class="tel_input" @keydown.enter="onClick" />
    <el-button size="small" @click="onClick" class="que">确定</el-button>
  </div>
  <el-table
    :data="tableData"
    style="width: 100%"
    cell-click
    :header-cell-style="{
      background: '#FEC752',
      height: '32px',
      color: '#fff',
    }"
  >
    <el-table-column prop="goodsId" label="盘点编号" min-width="50" align="center" />
    <el-table-column prop="goodsClass" label="盘点库存" min-width="60" align="center" />
    <el-table-column prop="fenlei" label="盘点分类" min-width="70" align="center" />
    <el-table-column prop="num" label="盘点数量" min-width="60" align="center" />
    <el-table-column prop="person" label="盘点人" min-width="70" align="center" />
    <el-table-column prop="time" label="盘点时间" :formatter="timeToDate" min-width="70" align="center" />
    <el-table-column label="操作" min-width="100" align="center">
      <template #default="scope">
        <el-button size="small" style="color: #fff" color="#ccc" @click="edit(scope.row)">编辑</el-button>
        <el-button size="small" style="color: #fff" color="#f56c6c" @click="remove(scope.row.goodsId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- <el-button type="primary" @click="end">盘点结束</el-button>
  <el-button type="primary" @click="clean">清空</el-button> -->

  <!--弹出框  -->
  <el-dialog title="编辑库存" v-model="open">
    <el-form :model="form" label-position="right" label-width="100px">
      <div class="vip_info">库存盘点:</div>
      <el-form-item label="盘点信息:" prop="goodsClass" :required="true">
        <el-select v-model="form.goodsClass" placeholder="请选择">
          <el-option label="一号仓库" value="一号仓库" />
          <el-option label="二号仓库" value="二号仓库" />
          <el-option label="三号仓库" value="三号仓库" />
          <el-option label="干货区" value="干货区" />
        </el-select>
      </el-form-item>
      <el-form-item label="盘点数量:" prop="num">
        <el-input v-model="form.num" placeholder="请输入数量" class="tel_input" />
      </el-form-item>
      <el-form-item label="盘点人员:" prop="person">
        <el-input v-model="form.person" placeholder="请输入盘点人员" class="tel_input" />
      </el-form-item>
      <el-form-item label="盘点时间:" prop="time">
        <!-- <el-input v-model="form.time" placeholder="请输入盘点时间" class="tel_input" :formatter="timeToDate" /> -->

        <el-col :span="11">
          <el-date-picker v-model="form.time" type="date" placeholder="Pick a date" style="width: 100%" />
        </el-col>
        <!-- <el-col :span="2" class="text-center">
          <span class="text-gray-500">-</span>
        </el-col> -->
        <!-- <el-col :span="11">
          <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
        </el-col> -->
      </el-form-item>
      <!-- <div class="vip_info">充值:</div> -->
      <el-form-item label="盘点分类:" prop="fenlei">
        <el-radio-group v-model="form.fenlei" text-color="#fff" fill="#ffae00">
          <el-radio-button label="商品类" class="radio_btn" />
          <el-radio-button label="零食类" class="radio_btn" />
          <el-radio-button label="日用品类" class="radio_btn" />
          <el-radio-button label="设备" class="radio_btn" />
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item label="充值套餐:" prop="tel">
        <el-radio-group v-model="form.taocan" text-color="#fff" fill="#ffae00">
          <el-radio-button label="充1000送200" class="radio_btn" />
          <el-radio-button label="充2000送500" class="radio_btn" />
        </el-radio-group>
      </el-form-item> -->
      <!-- <el-form-item label="自定义充值:" prop="tel">
        <el-input v-model="form.zidingyi" placeholder="请输入充值金额" class="tel_input" />
      </el-form-item> -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="open = false">取消</el-button>
        <el-button type="primary" @click="sure">确定</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 分页 -->
  <div class="fy">
    <el-button type="primary" @click="fy1">首页</el-button>
    <el-pagination layout="prev, pager, next" :total="total" @current-change="fn" />
    <!-- <el-pagination layout="prev, pager, next" :total="50" /> -->
    <el-button type="primary" @click="fy2">尾页</el-button>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { dataApi, edit1Api, removeApi } from '@/api/api.js'
import '@/mock/data.js'
import moment from 'moment'
import { ElMessage, ElMessageBox } from 'element-plus'

const value1 = ref(new Date())

const total = ref(0)
const value = ref('')
const tableData = ref([])

// 设置当前页数为1
const currentPage = ref(1)
const getData = async (value) => {
  const res = await dataApi({
    currentPage: currentPage.value,
    pageSize: 10,
    value: value,
  })
  console.log(res.data)
  tableData.value = res.data.result
  total.value = res.data.total
}

//页码切换的数据
const fn = (num) => {
  currentPage.value = num
  // localStorage.setItem('currentPage', currentPage.value)
}
//监听页码的改变直接做请求
watch(currentPage, () => {
  getData()
})

// 搜索
const onClick = () => {
  getData(value.value)
}

// 点击切换
const fy1 = () => {
  currentPage.value = 1
}
const fy2 = () => {
  fn(total.value / 10)
}

// 时间戳转换成时间
// 安装 npm install --save moment
// 引入 import moment from 'moment'
// <el-table-column prop="time" label="盘点时间" :formatter="timeToDate" min-width="70" align="center" />
const timeToDate = (row, column) => {
  var date = row[column.property]
  if (date == undefined) {
    return ''
  }
  return moment(date).format('YYYY-MM-DD')
}
onMounted(() => {
  getData()
})

// 弹出框
const open = ref(false)
const form = reactive({
  goodsClass: '',
  num: '',
  person: '',
  time: '',

  fenlei: '',
})

const edit = (row) => {
  open.value = true
  Object.assign(form, row)
}

const sure = async () => {
  const res = await edit1Api({ state: form })
  open.value = false
  getData()
}

// 删除
const remove = (goodsId) => {
  ElMessageBox.confirm('你确定删除吗?', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })

    .then(() => {
      removeApi({ id: goodsId }).then((res) => {
        ElMessage({
          message: res.data.msg,
          type: 'success',
        })
        console.log(res.data.msg)
        getData()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消成功',
      })
    })
}
</script>

<style lang="less" scoped>
.pan {
  // text-align: center;
  width: 1000px;
  padding: 10px;
  font-size: 15px;
  display: flex;
  span {
    margin-right: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
  }
  .tel_input {
    width: 250px;
  }
  .que {
    height: 30px;
    width: 60px;
    background-color: #ffd200;
    border-radius: 4px;
    margin-left: 10px;
    color: #fff;
    border: none;
    font-size: 16px;
  }
}
// 修改分页
.fy {
  width: 100%;
  height: 60px;
  background-color: #fff;

  margin-top: 14px;
  display: flex;
  justify-content: center;
  align-items: center;

  .el-pagination {
    justify-content: center;

    padding: 6px;
    .btn-prev,
    .el-icon {
      margin-top: 8px;
    }
  }
}
</style>
